import React from 'react';
import style from './style.styl';

import {IconFont,Button,Input} from '../../../../ui-components';
import { IconButton, } from 'sq-ui';


class AdminQuestion extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'AdminQuestion';
    this.state = {
      question: ''
    }
  }
  handleRemove = (index) => {
    this.props.onChange && this.props.onChange(this.props.value.filter((v,i) => i !== index));
  }
  addQuestion = () => {
    const {
      value,
    } = this.props;
    if(!this.state.question) return;
    this.props.onChange && this.props.onChange([...value, this.state.question]);
    this.setState({
      question: '',
    });
  } 
  render() {
    const {
      value
    } = this.props;
    return (
      <div>
        {
          value.map((v, i) => {

            return (
              <div className={style['question-item']} key={i}>
                <IconFont value='weixin' className={style['icon']}/>
                <div className={style['question-content']}>{v}</div>
                <IconButton
                  icon="delete"
                  className={style['question-del']}
                  size="14"
                  onClick={this.handleRemove.bind(this,i)}
                />
              </div>
            )
          })
        }
        <div className={style['question-btn']}>
          <Input
            autoFocus
            onChange={e => this.setState({'question': e.target.value})}
            value={this.state.question}
            width={'280px'}
          />
          <Button label={'添加'} className={style['btn']} onClick={this.addQuestion} />
        </div>
      </div>
    );
  }
}

export default AdminQuestion;
